<template>
	<view class='page'>
		<view class='card'>
			<view class='card-block'>
				<view class='card-block-head' @tap='openCard' :data-id="userInfo.id">
					<view class='card-block-head-top'>
						<image v-if="jobData.poster_img" class='block-head-img-es' :src="jobData.poster_img"></image>
						<view class='boxBarAvatar'>
							<view class='user-level-img-avatar'>
								<text class='user-level-text-mobile-es' style='color:black'>{{jobData.user.nickName}}</text>
								<text class='user-level-text-mobile-es' style='color:black'>{{jobData.user.mobile}}</text>
							</view>
							<image v-if="jobData.user.newAvatarUrl" :src="jobData.user.newAvatarUrl" class='block-head-img-avatar aaa'></image>
							<image v-else class='block-head-img-avatar bbb' :src="jobData.user.avatarUrl ? jobData.user.avatarUrl : defaultAvatar"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class='merchant-user'>

			<view class='merchant-user-cont'>
				<view class='merchant-user-name'>
					<text>标题：</text>
					<text>{{jobData.title}}</text>
				</view>

				<view class='merchant-user-name'>
					<text>地点：</text>
					<text>{{jobData.address}}</text>
				</view>

				<view class='merchant-user-business'>
					<text>¥:{{jobData.money}}</text>
					<view class='location-wrap' @tap='onNavigate'>
						<text>导航位置</text>
						<image class='loc-img' src='/static/images/loc.png'></image>
					</view>
				</view>
			</view>
		</view>
		<view class='cut-off' @tap='relationCustomer'>
			<view class='cut-off-box'>详情如下</view>
		</view>
		<view class='merchant-serve'>
			<text>{{jobData.description}}</text>
		</view>
		<view class='group'>
			<view class='introduce'>
				<view class='introduce-list' v-for="(item,index) in jobData.poster" >
					<image bindload="imageLoad" :data-index="index" :style="'width:'+images[index].width+'upx; height:'+images[index].height+'upx;'"
					 :src="item"></image>
				</view>
			</view>
		</view>


		<!-- 按钮 -->
		<view class='order-detail-fixed-bar'>
			<button class="fixed-normal-btn" @tap='phoneindex'>
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/job-want/index_logo.png'></image>
				<text>首页</text>
			</button>
			<button class="fixed-normal-btn" @tap='phonecallevent' :data-tel="jobData.user.mobile">
				<image class='fixed-normal-btn-img' src='/static/images/tel.gif'></image>
				<text>联系卖家</text>
			</button>
			<button class="fixed-normal-btn" open-type='share'>
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/share.gif'></image>
				<text>推荐给朋友</text>
			</button>
		</view>

	</view>

</template>

<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js';
	export default {
		data() {
			return {
				userInfo: '',
				jobData: '',
				images: {},
				list: [{
					id: '1',
					name: '新南悦陶瓷 (高新建材市场)',
					critic: '0',
					main_category: '瓷砖',
					sub_category: '陶瓷',
					address: '望城区高星建材批发大市场3-20栋125号',
					user: {
						mobile: '15200875223',
						latitude: 28.2956100000,
						longitude: 112.8342510000
					},
					shop_avatar: ['https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinnan_logo.jpg'],
					starLevel: ['', '', '', '', ''],
					poster: [
						'http://aliyun.oss.zxgyzj.com/images/xinnan_post1.jpg',
					],
					introduce_map: [
						'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue.jpg',
						'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue1.jpg',
						'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue2.jpg',
						'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue3.jpg',
						'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue4.jpg',
						'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue5.jpg',
						'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue6.jpg',
						'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue7.jpg',
						'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue8.jpg',
						'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue9.jpg',
						'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue10.jpg',
					],
					wechat_qr_code: 'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinnan_ewm.jpg',
					status: '1',
				}],
				id: '',
				type: '',
				userId: '',
				registrationName: '立即报名',
			}
		},
		methods: {
			// 打开导航
			  onNavigate: function () {
			    if (this.jobData.latitude == 0 && this.jobData.longitude == 0) {
			      return uni.showToast({
			        title: '该订单地点暂不支持导航',
			        icon: 'none',
			        duration: 2500,
			      });
			    }
			    uni.openLocation({
			      longitude: this.jobData.longitude ? +this.jobData.longitude : 40,
			      latitude: this.jobData.latitude ? +this.jobData.latitude : 40,
			      scale: 18
			    })
			  },
			  //拨打电话
			    phonecallevent: function (e) {
			      uni.makePhoneCall({
			        phoneNumber: e.currentTarget.dataset.tel
			      })
			    },
			    //回到首页
			    phoneindex: function (e) {
			      uni.switchTab ({
			        url: '/pages/index/index',
			      })
			    },
		},
		onLoad: function(options) {
			console.log('options的值',options);
			let userInfo = app.globalData.userInfo;
			var jobId;
			this.userInfo = app.globalData.userInfo;
			if (options.jobId) {
				jobId = options.jobId;
				var that = this;
				gyzjModel.prototype.getJobWantView(jobId).then(data=>{
					switch (data.code) {
						case 1:
							data = data.data;
							console.log('执行成功的data的值');
							console.log(data);
							that.jobData=data;
						default:
							uni.hideLoading();
							uni.showToast({
								title: data.message,
								icon: 'none'
							});
							break;
					}
				});
			}
		}
	}
</script>

<style>
	@import url("../../static/style/app.css");
	page {
	  padding-bottom: 120upx;
	  background-color: #fff;
	}
	
	.banner {
	  width: 100%;
	  height: 400upx;
	}
	.banner-img {
	  width: 100%;
	  height: 100%;
	}
	
	.merchant-user {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 20upx;
	  background-color: #fff;
	}
	.merchant-user-head {
	  width: 100upx;
	  height: 100upx;
	  margin-right: 20upx;
	}
	.merchant-user-cont {
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  font-size: 28upx;
	  margin-right: auto;
	}
	.merchant-user-name {
	  font-weight: 400;
	  width: 100%;
	  text-overflow:ellipsis;
	  white-space:nowrap;
	  overflow: hidden;     
	}
	.merchant-user-name text{
	  font-size:38upx;
	}
	.merchant-user-name text:nth-child(1){
	  margin-right:20upx;
	}
	.merchant-user-icon {
	  display: flex;
	  align-items: center;
	}
	.comment {
	  margin-left: 20upx;
	}
	.merchant-user-business {
	  color: #767676;
	  width: 100%;
	  overflow:hidden;
	  text-overflow:ellipsis;
	  white-space:nowrap;
	  padding-top: 20upx;
	
	}
	.merchant-user-business text:nth-child(1){
	  font-size:42upx;
	  display: inline-block;
	  float: left;
	  flex: 1.7;
	  margin-right: 130px;
	  color:#f94c48;
	}
	.merchant-user-business .location-wrap text{
	  color: #f28520;
	  margin-right: 0px;
	}
	.merchant-normal-btn {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  flex-direction: column;
	  color: #000;
	  font-size: 28upx;
	  background-color: #fff;
	  width: 60upx;
	  height: 100upx;
	  line-height: 1;
	  padding: 0;
	  margin: 0 20upx;
	  border-radius: 0;
	}
	.merchant-normal-btn image {
	  width: 40upx;
	  height: 40upx;
	  margin-bottom: 10upx;
	}
	.collect {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  flex-direction: column;
	  color: #000;
	  font-size: 28upx;
	  background-color: #fff;
	  width: 60upx;
	  height: 100upx;
	  line-height: 1;
	}
	.collect image {
	  width: 40upx;
	  height: 40upx;
	  margin-bottom: 10upx;
	}
	
	
	.merchant-relation {
	  background-color: #fff;
	  padding: 20upx;
	  border-top: 1px dotted #ccc;
	  border-bottom: 1px dotted #ccc;
	}
	.merchant-relation text {
	  width: 65%;
	  margin-right: auto;
	  overflow:hidden;
	  text-overflow:ellipsis;
	  white-space:nowrap;
	}
	.merchant-relation image{
	  width: 25upx;
	  height: 36upx;
	  margin-right: 20upx;
	}
	.merchant-relation-line {
	  display: flex;
	  align-items: center;
	  height: 80upx;
	}
	.back-f {
	  border: 1px solid #f94c48;
	  color: #000;
	  padding: 5upx 15upx;
	  border-radius: 5px;
	  font-size: 28upx;
	}
	
	.merchant-serve {
	  width: 96%;
	  height: 200upx;
	  margin-bottom: 10upx;
	  padding-left:22upx;
	}
	.merchant-serve text{
	  font-size:38upx;
	}
	.merchant-serve image {
	  width: 100%;
	  height: 100%;
	}
	
	.introduce-list {
	  /* width: 100%;
	  height: 400upx; */
	  margin: 10upx 0;
	  text-align: center;
	}
	.introduce-list image {
	  width: 100%;
	}
	
	.banner {
	  width: 100%;
	  height: 350upx;
	}
	.banner image {
	  width: 100%;
	  height: 100%;
	}
	
	.group {
	  padding: 20upx;
	}
	.group-all {
	  width: 100%;
	  height: 60upx;
	  display: flex;
	  margin-top: 20upx;
	}
	.group-all-brand {
	  width: 40%;
	  height: 100%;
	  background-color: #B5B5B5;
	  color: #fff;
	  font-weight: 600;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.group-all-name {
	  width: 60%;
	  height: 98%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-bottom: 1px solid #B5B5B5;
	}
	.color-red {
	  color: #f94c48;
	  font-weight: 600;
	}
	
	.register {
	  width: 100%;
	  display: flex;
	  padding: 40upx 0;
	}
	.register-for,
	.register-check,
	.register-tuxedo {
	  width: 32%;
	  height: 80upx;
	  color: #f94c48;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.register-for {
	  background-color: #f94c48;
	  color: #fff;
	  border-radius: 10upx;
	}
	.register-check{
	  border: 1px solid #f94c48;
	  border-radius: 10upx;
	  margin: 0 2%;
	}
	.register-tuxedo {
	  border: 1px solid #f94c48;
	  border-radius: 10upx;
	}
	
	.purchase-details {
	  background-color: #eee;
	  padding: 30upx;
	  font-size: 28upx;
	  border-radius: 15upx;
	}
	
	.ercode {
	  padding: 20upx;
	}
	.all-ercode {
	  width: 100%;
	  height: 300upx;
	  background-color: #fff;
	  border-radius: 15upx;
	  display: flex;
	}
	.all-ercode-ma {
	  width: 50%;
	  height: 100%;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	}
	.all-ercode-ma image {
	  width: 200upx;
	  height: 200upx;
	  margin-bottom: 10upx;
	}
	
	.fixed-bar {
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  height: 100upx;
	  display: flex;
	  border-top: 1px solid #f94c48;
	  line-height:100upx;
	}
	.fixed-bar-left {
	  width: 33%;
	  height: 99%;
	  line-height: 99%;
	  color: white;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  font-size: 24upx;
	  background-color: #f94c48;
	  padding: 0;
	  border-radius: 0;
	}
	.fixed-bar-left-border {
	  border-right: 1px solid white;
	}
	.fixed-bar-left image{
	  width: 40upx;
	  height: 40upx;
	  margin-bottom: 15upx;
	  display:inline-block;
	}
	.fixed-bar-right image {
	  margin-right: 10upx;
	}
	.fixed-bar-right {
	  width: 60%;
	  height: 100%;
	  background-color: #f94c48;
	  color: #fff;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 38upx;
	}
	
	.part-time {
	  height: 240upx;
	  margin: 20upx 10upx;
	}
	.part-time image {
	  width: 100%;
	}
	.signup {
	  width: 100%;
	}
	.signup image{
	  width: 100%;
	}
	/*新增的名片样式*/
	.card {
	  width: 100%;
	  height: 375upx;
	  background-color:#ccc;
	  position: relative;
	
	}
	.card-img {
	  width: 100%;
	  height: 319upx;
	  z-index: -1;
	}
	.card-block {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 80%;
	}
	.block-head-img {
	  width: 180upx;
	  height: 180upx;
	  border-radius: 50%;
	  margin-right: 20upx;
	}
	.block-head-img-es{
	  width: 340upx;
	  height: 340upx;
	  margin-right: 20upx;
	  margin-left: -21upx;
	  margin-top: 87upx;
	
	  /* margin-top: 16upx; */
	
	}
	.card-block-head {
	  border-radius: 15upx;
	  margin: 20upx 20upx 10upx 20upx;
	  background-color: #ccc;
	  display: flex;
	  padding: 10upx 20upx 20upx 25upx;
	  flex-direction: column;
	
	}
	.card-block-head-top {
	  display: flex;
	  align-items: center;
	  height: 230upx;
	  width: 100%;
	  position:relative;
	}
	.block-head-user {
	  width: 50%;
	  color: #fff;
	  margin-top: 30upx;
	
	}
	.block-head-user-name {
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  height: 110upx;
	  font-size: 36upx;
	  font-weight: 600;
	}
	.block-head-user-name-title {
	  max-width: 100%;
	  white-space: nowrap;
	  font-size: 36upx;
	  color:black;
	  /* text-overflow: ellipsis; */
	}
	.user-level-img {
	  display: inline-block;
	}
	.icon-star {
	  width: 36upx;
	  height: 36upx;
	}
	
	.card-block-head-address {
	  height: 100upx;
	  display: flex;
	  align-items: flex-end;
	  color: #ccc;
	  font-size: 32upx;
	}
	.address-card-name {
	  width: 90%;
	  margin-right:auto;
	  overflow:hidden;
	  text-overflow:ellipsis;
	  white-space:nowrap;
	  line-height: 1;
	  color:black;
	}
	  
	.address-card-host{
	  width: 36upx;
	  height: 48upx;
	  margin-right: 20upx;
	}
	.address-card-wx {
	  position: absolute;
	  top: 40upx;
	  right: 50upx;
	  width: 80upx;
	  height: 80upx;
	  z-index: 9;
	}
	
	.block-head-user-workCategory text {
	  border: 1px solid #FFB02D;
	  display: inline-block;
	  padding:  2upx 20upx;
	  margin: 18upx 20upx 10upx 0;
	  border-radius: 15upx;
	  color:black;
	}
	
	/* 个人简介 */
	.card-block-brief {
	  margin: 0 20upx;
	  padding-bottom: 20upx;
	}
	.card-block-brief-head {
	  height: 60upx;
	  margin: 10upx 0;
	  display: flex;
	  align-items: center;
	  color: #FFB02D;
	}
	.card-block-brief-img {
	  width: 30upx;
	  height: 40upx;
	  margin-right: 20upx;
	}
	.card-block-brief-intr {
	  /* width: 100%; */
	  margin: 20upx 20upx 0;
	  /* padding-bottom: 20upx; */
	  color: #FFB02D;
	  text-overflow: -o-ellipsis-lastline;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  line-clamp: 2;
	  -webkit-box-orient: vertical;
	}
	/*名片下的分享和拨打电话*/
	.card-line-btn {
	  padding: 20upx;
	  padding-bottom:0upx;
	  display: flex;
	}
	.line-btn-editinfo {
	width: 35%;
	height: 80upx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 15upx;
	color: #fff;
	background-color: #666666;
	margin-right: 2%;
	
	}
	.line-btn-editinfo image {
	  width: 40upx;
	  height: 40upx;
	  margin-right: 20upx;
	}
	.line-btn-card {
	  width: 35%;
	  height: 80upx;
	  line-height: 80upx;
	  padding: 0;
	  border-radius: 15upx;
	  background-color:#656565;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color:white;
	}
	.line-btn-card image {
	  width: 40upx;
	  height: 40upx;
	  margin-right: 20upx;
	}
	.line-btn-collect {
	  width: 26%;
	  height: 80upx;
	  margin-right: 2%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-radius: 15upx;
	  background-color:#666666;
	  color:white;
	}
	.line-btn-collect image {
	  width: 32upx;
	  height: 32upx;
	  margin-right: 20upx;
	}
	/*名片结束页*/
	.btn-pay-service-yq{
	  background-color:#F8EAD0;
	 width: 60%;
	height: 91upx;
	line-height: 86upx;
	position: relative;
	font-size: 31upx;
	text-align: right;
	padding-right: 13upx;
	margin-left: 30upx;
	font-weight: 400;
	
	}
	.btn-pay-service-yq image{
	height: 50upx;
	width: 50upx;
	margin-top: 4upx;
	position: absolute;
	top: 14upx;
	left: 10upx;
	}
	/*名片结束页*/
	/*详情页设置*/
	.location-wrap {
	float: left;
	color: #f28520;
	border: 1px solid #f28520;
	padding: 0 10upx;
	border-radius: 5px;
	margin-top: -1px;
	}
	.loc-img {
	  width: 30upx;
	  height: 30upx;
	  margin-top: 20upx;
	
	}
	.location-wrap{
	  font-size:30upx;
	}
	.cut-off {
	  padding: 10upx 20upx 0 20upx;
	  display: flex;
	  background-color: #999;
	  margin: 20upx 0;
	}
	.cut-off-box {
	  color: white;
	  font-size: 38upx;
	  padding:10upx;
	  margin-right: auto;
	  display: flex;
	  justify-content: center;
	  align-items: flex-end;
	  line-height: 60upx;
	}
	.fixed-normal-btn{
	  width:33.3333%;
	  font-size:30upx;
	}
	/*增加的表格布局*/
	.boxBarAvatar{
	  float: right;
	width: 450upx;
	text-align: left;
	position:absolute;
	right:0upx;
	}
	.boxBarAvatar image{
	  position:absolute;
	  top: 99upx;
	width: 160upx;
	height: 160upx;
	
	right: -17upx;
	
	
	}
	.block-head-img-avatar {
	width: 120upx;
	height: 120upx;
	border-radius: 50%;
	margin-left: 108upx;
	
	}
	.user-level-text-mobile-es{
	  display:block;
	  margin-top:4upx;
	  font-size:38upx;
	}
	.user-level-img-avatar{
	  display: inline-block;
	  margin-top:316upx;
	  margin-left: 135upx;
	
	}
	.fixed-normal-btn:nth-child(3){
	  padding:0upx;
	} 
	.fixed-normal-btn image {
	width: 40upx;
	height: 40upx;
	margin-right: 10upx;
	padding:0upx;
	}

</style>
